<template>
  <el-card class="question-container">
    <el-row
      type="flex"
      justify="space-between"
      style="height:32px;margin-bottom:15px"
      align="middle"
    >
      <span style="color:#ffc0cb;font-size:12px">
        说明：目前支持学科和关键字条件筛选
      </span>
      <el-button
        class="addBtn"
        type="success"
        icon="el-icon-edit"
        size="small"
        @click="$router.push(`/questions/new`)"
      >
        新增试题
      </el-button>
    </el-row>
    <!-- 表单 -->
    <el-form ref="form" :model="formDate" :rules="rules" label-width="90px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科" prop="subjectID">
            <el-select
              v-model="formDate.subjectID"
              placeholder="请选择"
              style="width:100%"
              @focus="getSubjectList"
              @change="changeID"
            >
              <el-option
                v-for="(item, index) in subjectList"
                :key="index"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" prop="catalogID">
            <el-select
              v-model="formDate.catalogID"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="(item, index) in twoLevelDirectory"
                :key="index"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" prop="tags">
            <el-select
              v-model="formDate.tags"
              placeholder="请选择"
              style="width:100%"
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" prop="keyword">
            <el-input
              v-model.trim="formDate.keyword"
              placeholder="请选择"
              style="width:100%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型" prop="questionType">
            <el-select
              v-model="formDate.questionType"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option label="单选" :value="1"></el-option>
              <el-option label="多选" :value="2"></el-option>
              <el-option label="简答" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" prop="difficulty">
            <el-select
              v-model="formDate.difficulty"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option label="简单" :value="1"></el-option>
              <el-option label="一般" :value="2"></el-option>
              <el-option label="困难" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" prop="direction">
            <el-select
              v-model="formDate.direction"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="(item, index) in directionList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" prop="creatorID">
            <el-select
              v-model="formDate.creatorID"
              placeholder="请选择"
              style="width:100%"
              @focus="creatorList"
            >
              <el-option
                v-for="item in creatorLists"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注" prop="remarks">
            <el-input
              v-model.trim="formDate.remarks"
              placeholder="请选择"
              style="width:100%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" prop="shortName">
            <el-input
              v-model.trim="formDate.shortName"
              placeholder="请选择"
              style="width:100%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" prop="province">
            <el-row type="flex" justify="space-between">
              <el-select
                v-model="formDate.province"
                placeholder="请选择"
                style="width:70%"
                class="select-right"
                @focus="getProvincesList"
                @change="getCitysList"
              >
                <el-option
                  v-for="(item, index) in provincesList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-form-item prop="city">
                <el-select
                  v-model="formDate.city"
                  placeholder="请选择"
                  style="width:100%"
                  prop="city"
                >
                  <el-option
                    v-for="(item, index) in cityList"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-row type="flex" justify="end">
              <el-button size="small" @click="clearForm">清除</el-button>
              <el-button size="small" type="primary" @click="getAllChoice">
                搜索
              </el-button>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- /表单 -->
    <!-- tabs切换 -->
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="All"></el-tab-pane>
      <el-tab-pane label="待审核" name="0"></el-tab-pane>
      <el-tab-pane label="已审核" name="1"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
    </el-tabs>
    <!-- /切换 -->
    <!-- 提示消息 -->
    <el-alert
      :closable="false"
      :title="`数据一共${counts}条`"
      type="info"
      show-icon
      style="margin-bottom:15px"
    ></el-alert>
    <!-- 表格 -->
    <el-table :data="tableDate" width="100%">
      <el-table-column
        align="center"
        label="试题编号"
        prop="number"
        width="215px"
      ></el-table-column>
      <el-table-column
        align="center"
        label="学科"
        prop="subject"
        width="90px"
      ></el-table-column>
      <el-table-column
        align="center"
        label="目录"
        prop="catalog"
        width="90px"
      ></el-table-column>
      <el-table-column
        align="center"
        label="题型"
        prop="questionType"
        width="90px"
        :formatter="questionTypeFn"
      ></el-table-column>
      <el-table-column align="center" label="题干" width="280px">
        <template slot-scope="scope">
          <span v-html="scope.row.question"></span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="录入时间" width="170px">
        <template slot-scope="scope">
          <span>{{ scope.row.addDate }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        align="center"
        label="录入时间"
        :formatter="addDate"
        width="170px"
        prop="addDate"
      >
        <!-- <template slot-scope="scope">
          <span>{{ scope.row.addDate }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        align="center"
        label="难度"
        prop="difficulty"
        width="95px"
        :formatter="difficultyFn"
      ></el-table-column>
      <el-table-column
        align="center"
        label="录入人"
        prop="creatorID"
        width="95px"
      ></el-table-column>
      <el-table-column
        align="center"
        label="审核状态"
        prop="chkState"
        width="95px"
        :formatter="chkStateFn"
      ></el-table-column>
      <el-table-column
        align="center"
        label="审核意见"
        prop="chkRemarks"
        width="170px"
      ></el-table-column>
      <el-table-column
        align="center"
        label="审核人"
        prop="chkUser"
        width="95px"
      ></el-table-column>
      <el-table-column
        align="center"
        label="发布状态"
        prop="publishState"
        width="95px"
        :formatter="publishStateFn"
      ></el-table-column>
      <el-table-column align="center" label="操作" fixed="right" width="200px">
        <template slot-scope="scope">
          <el-row type="flex" justify="space-around">
            <el-link
              type="primary"
              :underline="false"
              @click="questionDialogFn(scope.row)"
              >预览</el-link
            >
            <el-link
              :underline="false"
              :disabled="scope.row.chkState !== 0 ? true : false"
              :type="scope.row.chkState !== 0 ? 'info' : 'primary'"
              @click="chkStateShow(scope.row)"
              >审核</el-link
            >
            <el-link
              :underline="false"
              :disabled="scope.row.publishState === 1 ? true : false"
              :type="scope.row.publishState === 1 ? 'info' : 'primary'"
              @click="$router.push(`/questions/new?id=${scope.row.id}`)"
              >修改</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              @click="changePublishState(scope.row, $event)"
              >{{ scope.row.publishState === 1 ? '下架' : '上架' }}</el-link
            >
            <el-link
              :underline="false"
              :type="scope.row.publishState === 1 ? 'info' : 'danger'"
              :disabled="scope.row.publishState === 1 ? true : false"
              @click="delQusetion(scope.row)"
              >移除精选</el-link
            >
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- /表格 -->
    <!-- 分页 -->
    <el-row type="flex" justify="end">
      <el-pagination
        style="margin-top:20px"
        background
        layout="prev, pager, next, sizes, jumper"
        :page-sizes="[1, 2, 3, 5, 10, 20]"
        :page-size="formDate.pagesize"
        :current-page="formDate.page"
        :total="counts"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </el-row>
    <!-- 审核弹框 -->
    <questions-check
      :showDialog="showDialog"
      @close="showDialog = false"
      :checkFormDate="checkFormDate"
      @update="getAllChoice"
    />
    <!-- 试题预览组件 -->
    <questions-preview
      :questionDialog.sync="questionDialog"
      :questionDialogDate="questionDialogDate"
    />
  </el-card>
</template>

<script>
// 格式化列
import * as Constants from '@/api/hmmm/constants.js'
import {
  getAllChoice,
  choicePublishState,
  removeChoice,
  list2,
  twoLeveList,
  creatorList
} from '@/api/hmmm/questions.js'
// 审核弹框组件
import QuestionsCheck from '../components/questions-check.vue'
// 城市，地区
import { provinces, citys } from '@/api/hmmm/citys.js'
// 试题预览组件
import QuestionsPreview from '../components/questions-prev.vue'
// 时间处理插件
import dayjs from 'dayjs'
export default {
  name: 'QuestionChoice',
  components: {
    QuestionsCheck,
    QuestionsPreview
  },
  data() {
    return {
      // 请求参数
      formDate: {
        page: 1, // 当前页数
        pagesize: 5, // 每页条数
        subjectID: null, // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: null, // 录入人
        catalogID: null, // 二级目录
        chkState: null // 0 待审核 1 通过 2 拒绝审核状态
      },
      rules: {},
      tableDate: [], // 表格数据
      counts: 0, // 实体数量
      showDialog: false, // 审核弹框
      checkFormDate: {}, // 审核表单数据
      activeName: 'All', // 标签页名字
      subjectList: [], // 学科数据列表
      twoLevelDirectory: [], // 二级目录列表
      directionList: Constants.direction, // 方向列表
      creatorLists: [], // 录入人
      provincesList: [], // 省份列表数据
      cityList: [], // 省份下城市列表
      questionDialog: false, // 试题弹层
      questionDialogDate: {} // 试题弹层对应数据
    }
  },
  created() {
    this.getAllChoice()
  },
  methods: {
    // 获取精选试题列表
    async getAllChoice() {
      try {
        const { data } = await getAllChoice(this.formDate)
        console.log(data)
        // 表格数据
        this.tableDate = data.items
        
        // 试题数量
        this.counts = data.counts
      } catch (error) {
        this.$message.error('获取精选题库失败')
      }
    },
    // 更改页码
    handleCurrentChange(val) {
      this.formDate.page = val
      this.getAllChoice()
    },
    // 更换每页条数
    handleSizeChange(val) {
      this.formDate.pagesize = val
      this.getAllChoice()
    },
    // 格式化题型
    questionTypeFn(row, column, cellValue, index) {
      const obj = Constants.questionType.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 格式化难度
    difficultyFn(row, column, cellValue, index) {
      const obj = Constants.difficulty.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 格式化审核状态
    chkStateFn(row, column, cellValue, index) {
      const obj = Constants.chkType2.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 格式化发布状态
    publishStateFn(row, column, cellValue, index) {
      const obj = Constants.publishType2.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 格式化时间
    addDate(row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    // 点击审核按钮
    chkStateShow(val) {
      this.showDialog = true
      // 审核表单数据
      this.checkFormDate = val
    },
    // 点击上下架
    async changePublishState(row, e) {
      try {
        await this.$confirm('此操作将修改发布状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 状态切换接口
        if (e.target.innerText === '下架') {
          await choicePublishState({
            id: row.id,
            publishState: 0
          })
        } else {
          await choicePublishState({
            id: row.id,
            publishState: 1
          })
        }
        this.$message.success('操作成功')
        this.getAllChoice()
      } catch (error) {
        if (error === 'cancel') {
          this.$message.error('取消操作')
        } else {
          this.$message.error(error)
        }
      }
    },
    // 移除精选试题
    async delQusetion(row) {
      try {
        await this.$confirm('此操作将移除此试题, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await removeChoice({
          id: row.id,
          choiceState: 0 // 1 加入 0 移出
        })
        this.$message.success('操作成功')
        if (this.tableDate.length === 1) {
          this.formDate.page--
          this.getAllChoice()
        }
        this.getAllChoice()
      } catch (error) {
        if (error === 'cancel') {
          this.$message.error('取消操作')
        } else {
          this.$message.error(error)
        }
      }
    },
    // 切换标签页事件
    handleClick() {
      // this.activeName 标签页对应 name 值，直接赋值给审核状态chkState
      if (this.activeName === 'All') {
        this.formDate.chkState = null
      } else {
        this.formDate.chkState = this.activeName
      }
      this.getAllChoice()
    },
    // 表单事件
    // 获取学科列表
    async getSubjectList() {
      try {
        const { data } = await list2({
          page: 1,
          pagesize: 20
        })
        console.log(data)
        this.subjectList = data.items
      } catch (error) {
        this.$message.error('获取学科数据失败')
      }
    },
    // 获取二级目录
    async changeID(id) {
      // id 选中学科的id
      if (!id) {
        return
      }
      try {
        const { data } = await twoLeveList({
          page: 1,
          pagesize: 20,
          subjectID: id
        })
        this.twoLevelDirectory = data.items
      } catch (error) {
        this.$message.error('获取二级目录失败')
      }
    },
    // 录入人
    async creatorList() {
      try {
        const { data } = await creatorList({
          page: this.formDate.page,
          pagesize: this.formDate.pagesize,
          keyword: this.formDate.keyword
        })
        this.creatorLists = data.list
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 省份城市
    getProvincesList() {
      this.provincesList = provinces()
    },
    // 城市地区
    getCitysList(val) {
      // val 当前省份
      this.cityList = citys(val)
    },
    // 清空搜索表单每一项
    clearForm() {
      this.$refs.form.resetFields()
    },
    // 试题弹层
    questionDialogFn(row) {
      this.questionDialog = true
      this.questionDialogDate = row
    }
  }
}
</script>

<style scoped lang="scss">
.question-container {
  margin: 10px 10px;
  .select-right {
    margin-right: 10px;
  }
  ::v-deep .el-link--inner {
    font-size: 12px;
  }
}
</style>
